<template>
	<!-- 海报详情 -->
	<view class="container">
		<image :src="haibaoimg" mode="widthFix" class="haibao" @longtap="cun"></image>
		<view class="label">
			规则一：
		</view>
		<view class="text">
			通过本邀请海报关注的好友，系统将自动锁定成为您的直邀客户, 他们在微信商城中购买任何商品，您都可以无条件获得该用户的奖金；
		</view>
		<view class="label">
			规则二：
		</view>
		<view class="text">
			分享产品海报，用户识别海报二维码下单，分享者可得奖金；总部公众号进行推送或总部的营销活动，关注用户下单则奖金规锁粉者得。
		</view>
		<view class="sm_box">
			<view class="sm">
				<view class="sm_tit">说明：</view>
				<view class="sm_text">
					分享本邀请海报，您的好友关注之后，系统会自动检测并永久记录客户关系。如果您的好友已被其他潮人抢先邀请，他就不能成为您的直邀客户，系统以最早关注成为直邀客户为准。                    
				</view>
			</view>
		</view>
		<!-- 侧边栏 -->
		<fixce></fixce> 
		<!-- 回到顶部start -->
		<view class="top" :style="{'display':(topState===true? 'block':'none')}">
		<image src="../../static/huitop.png" class="huitop"
		@tap="top()">
		</view>
		</image>
			<!-- 回到顶部end-->
	</view>
</template>

<script>
	import fixce from '../../component/fixce.vue';  //侧边栏组件
	export default{
		components:{
		fixce
		},
		data (){
			return{
				topState:false,
				haibaoimg:''
			}
		},
		onLoad(option){
			console.log(option.url); 
			this.haibaoimg=option.url;
		},
		// 回到顶部start
		onPageScroll(e){ //根据距离顶部距离是否显示回到顶部按钮
		    if(e.scrollTop>200){ //当距离大于200时显示回到顶部按钮
		        this.topState = true
		    }else{ //当距离小于200时关闭回到顶部按钮
		        this.topState = false
		    }
		},
		// 回到顶部end
		methods:{
			top() { //回到顶部
			　　　　uni.pageScrollTo({ 
			　　　　　　scrollTop: 0, duration: 300 
			　　　　}); 
			　　},
			cun (){
				const _this=this;
				uni.showModal({
				    title: '提示',
				    content: '是否保存图片',
				    success: function (res) {
				        if (res.confirm) {
				            uni.saveImageToPhotosAlbum({
				            	            filePath: _this.haibaoimg,
				            	            success: function () {
				            	                console.log('save success');
				            	            }
				            });
							uni.showToast({
								title:'已保存'
							})
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
		}
	}
	}
</script>

<style>
	.container{
		padding-bottom:35rpx;
	}
	.haibao{
		width:100%;
	}
	.label{
		width:90%;
		margin:20rpx auto;
		font-weight:500;
		font-size:28rpx;
	}
	.text{
		width:90%;
		margin:0 auto;
		color:#666;
	}
	.sm_box{
		width:90%;
		margin:20rpx auto;
		padding-top:25rpx;
		border-top:2rpx solid #ebebeb;
	}
	.sm{
		width:90%;
		margin:0 auto;
		background-color: #ff80c0;
		padding:20rpx 15rpx;
		border-radius: 5rpx;
	}
	.sm_tit{
		font-weight:500;
		font-size:28rpx;
		color:#fff;
	}
	.sm_text{
		color:#fff;
	}
</style>
